<template>
  <a-modal
      :confirmLoading="confirmLoading"
      :destroyOnClose="true"
      :footer="null"
      :maskClosable="false"
      :title="title"
      :visible="visible"
      :width="720"
      @cancel="handleCancel"
  >
    <WalletTransactionList :wallet-id="walletId"/>
  </a-modal>
</template>

<script>
import {Modal} from 'ant-design-vue'
import WalletTransactionList from '../transaction/WalletTransactionList'

export default {
  name: 'WalletForm',
  components: {
    'a-modal': Modal,
    WalletTransactionList
  },
  data() {
    return {
      // 对话框标题
      title: '钱包余额明细',
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      walletId: undefined
    }
  },
  methods: {
    open(walletId) {
      this.visible = true
      this.confirmLoading = true
      try {
        this.walletId = walletId
      } finally {
        this.confirmLoading = false
      }
    },
    // 关闭对话框事件
    handleCancel() {
      this.visible = false
    }
  }
}
</script>
<style lang="less">
.ant-modal-body {
  padding-bottom: 24px !important;
}
</style>